import { toggleFirstReviewDetail } from 'actions/annotation-actions';
import { Tag, Row, Col, Button } from 'antd';
import classNames from 'classnames';
import useAnnotation from 'hooks/useAnnotation';
import { useSelector, useDispatch } from 'react-redux';
import { CombinedState } from 'reducers';

// 检查标签和属性是否有变化
export default function FirstReviewItemDetails(props: { clientID: number }): JSX.Element {
    const { clientID } = props;
    const { annotationData } = useSelector((state: CombinedState) => state.annotation.approval);
    const [origin = {}, firstReview = {}, secondReview] = annotationData?.[clientID!] || [];
    const dispatch = useDispatch();

    const { differenceObj } = useAnnotation();

    // 初审diff
    const diff = differenceObj(origin, firstReview);
    const firstReviewClass = classNames({
        'text-base': true,
        'text-[#F53F3F]': diff === true,
    });

    const hide = () => {
        dispatch(toggleFirstReviewDetail());
    };

    return (
        <div className='bg-white p-3 rounded-md' style={{ border: '1px solid #E9EAED' }}>
            <div>
                <div className='font-bold text-base mb-3 font-bold'>标注员</div>
                <div>
                    <Tag color={origin.color}>{clientID}</Tag>
                    <span className='text-base'>{origin.label?.name}</span>
                </div>
                <div className='!bg-[#F7F8FA] p-3 mt-3 rounded space-y-3'>
                    {origin?.label?.attributes.map(
                        (attribute: any): JSX.Element => (
                            <Row
                                key={attribute.id}
                                align='middle'
                                justify='start'
                                className='cvat-object-item-attribute-wrapper '
                                gutter={[16, 0]}
                            >
                                <Col span={24}>
                                    <span className='text-[#86909C]'>{attribute.name}：</span>
                                    {origin.attributes[attribute.id]}
                                </Col>
                            </Row>
                        ),
                    )}
                </div>
            </div>
            <div className='mt-18px'>
                <div>
                    <div className='font-bold text-base mb-3 font-bold'>初审员</div>
                    <div>
                        <Tag color={firstReview.color}>{clientID}</Tag>
                        <span className={firstReviewClass}>{firstReview.label?.name}</span>
                    </div>
                    <div className='!bg-[#F7F8FA] p-3 mt-3 rounded space-y-3'>
                        {firstReview?.label?.attributes.map(
                            (attribute: any): JSX.Element => (
                                <Row
                                    key={attribute.id}
                                    align='middle'
                                    justify='start'
                                    className='cvat-object-item-attribute-wrapper '
                                    gutter={[16, 0]}
                                >
                                    <Col span={24}>
                                        <span className='text-[#86909C]'>{attribute.name}：</span>
                                        <span
                                            className={
                                                Array.isArray(diff) && diff.includes(attribute.id.toString())
                                                    ? 'text-[#F53F3F]'
                                                    : ''
                                            }
                                        >
                                            {firstReview?.attributes?.[attribute.id]}
                                        </span>
                                    </Col>
                                </Row>
                            ),
                        )}
                    </div>
                </div>
                <div className='mt-3 px-3 pb-3 flex justify-end gap-3'>
                    <Button type='primary' ghost onClick={hide}>
                        关闭
                    </Button>
                </div>
            </div>
        </div>
    );
}
